<template>
  <page-body safeAreaLeft :bgImg='" "' backgroundColor='#00374D'>
    <view class="jh-flex">
      <view class="pages jh-flex-center">
        <view class="login jh-column jh-align-center">
          <image class="login-logo" :src="ossDomain + '/menu-bar-logo.png'"></image>
          <view class="login-input jh-align-center">
            <image style="width: 16px;height: 14px;margin: 0 13px;" :src="ossDomain + '/icon-user.png'"></image>
            <input class="login-input-inner font-B" v-model="mobile" type="number" placeholder="请输入您的账号" placeholder-style="color:#C9CACA;" maxlength="11"/>
          </view>
          <view class="login-input jh-align-center" v-if="loginType == 'code'">
            <image style="width: 13px;height: 17px;margin: 0 15px;opacity: 0;" :src="ossDomain + '/icon-lock.png'"></image>
            <input class="login-input-inner2 font-B" v-model="code" type="number" maxlength="4" placeholder="请输入验证码" placeholder-style="color:#C9CACA;" />
            <view class="login-verifi c-00374D jh-flex-center" @tap="send">
              {{sendAuthCode ? '获取验证码' : count}}
            </view>
          </view>
          <view class="login-input jh-align-center" v-else>
            <image style="width: 13px;height: 17px;margin: 0 15px;" :src="ossDomain + '/icon-lock.png'"></image>
            <input class="login-input-inner font-B" v-model="pass" type="number" placeholder="请输入密码" placeholder-style="color:#C9CACA;" maxlength="11"/>
          </view>
          <view class="login-tool jh-space-between">
            <view class="font-B" @tap="changeLoginType()" style="font-size: 10px;color: #ccc;padding: 12px 0;">{{loginType == 'code' ? '密码登陆' : '验证码登陆'}}</view>
            <view class="font-B" @tap="$navigateTo('/pages/login/change-pass')" style="font-size: 10px;color: #ccc;padding: 12px 0;">忘记密码</view>
          </view>
          <view class="login-btn c-b-fff jh-flex-center" @tap='handleLogin'>
            确定
          </view>
          <view class="jh-flex-center" style="margin-top: 18px;margin-bottom: 11px;">
            <view class="login-divider"></view>
            <view class="c-ccc font-B jh-line-height" style="font-size: 10px;padding: 0 6px;">第三方登陆</view>
            <view class="login-divider"></view>
          </view>
          <view class="login-other jh-space-between">
            <view class="jh-flex-center jh-column" v-for="(i,index) in other" :key='index'>
              <image :src="ossDomain + '/icon-'+i.type+'.png'" style="width: 25px;height: 25px;display: block;"></image>
              <view class="c-ccc font-B" style="font-size: 10px;">{{i.text}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <backBtn v-if="type == 'change'"></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  // #ifdef APP-PLUS
  const trtc = uni.requireNativePlugin('tx-call');
  //#endif
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {backBtn},
    data() {
      return {
        ossDomain: uni.ossDomain,
        loginType: 'code',
        type: '', // change为切换账号
        mobile: '',
        code: '',
        pass: '',
        sendAuthCode: true,
        count: "",
        loading: false,
        other: [
          {
            type: 'wx',
            text: '微信'
          },
          {
            type: 'qq',
            text: 'QQ'
          },
          {
            type: 'xl',
            text: '微博'
          }
        ]
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo,
        rtcConfig: state => state.global.rtcConfig,
        userInfo: state => state.user.userInfo,
      })
    },
    onUnload() {
      this.loading = false
    },
    onLoad({type}) {
      this.type = type || ''
    },
    methods: {
      changeLoginType () {
        if (this.loginType != 'code') {
          this.loginType = 'code'
        } else {
          this.loginType = 'pass'
        }
      },
      send () {
        if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.mobile)) {
          uni.showToast({
            title: "请输入正确的手机号码"
          })
          return;
        }
        if (!this.sendAuthCode) return;
        uni.showLoading({
          title: '验证码发送中',
          mask: true
        })
        let obj = {
          mobile: this.mobile
        }
        this.$http.send(obj).then(res => {
          uni.hideLoading()
          this.getCode()
        })
      },
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.sendAuthCode = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.sendAuthCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      // 点击登录进行初始化
      handleLogin() {
        if (!this.mobile) {
          uni.showToast({
            title: "请输入手机号码",
            icon: 'none'
          })
          return;
        }
        if (this.type == 'change' && this.mobile === this.userInfo.user.mobile) {
          uni.showToast({
            title: "登陆的账号不能和第一个账号一样",
            icon: 'none'
          })
          return;
        }
        if (!this.code) {
          uni.showToast({
            title: "请输入验证码",
            icon: 'none'
          })
          return;
        }
        let obj = {
          mobile: this.mobile,
          code: this.code
        }
        uni.showLoading({
          title: '正在登陆',
          mask: true
        })
        this.$http.login(obj).then(res => {
          let data = res.data || {}
          if (this.type == 'change') {
            uni.setStorageSync('userInfo2',this.userInfo)
          }
          this.$store.dispatch('resetStore')
          this.$store.commit('setUserInfo', data);
          this.login(data)
        })
      },
      login(info) {
        let {tencent_user_id} = info.user
        tencent_user_id = String(tencent_user_id)
        let obj = {
          identifier: tencent_user_id,
          expire: 259200
        }
        if (this.type == 'change') {
          uni.$app.logout()
        }
        this.$http.getUserSig(obj).then(res => {
          let {userSig, sdkappid} = res.data
          // #ifdef APP-PLUS
          if (trtc) {
            if (this.type == 'change') {
              trtc.logout(result=>{
                console.log(result);
                trtc.login({
                  sdkAppId: sdkappid,
                  userId: tencent_user_id,
                  userSig,
                }, res => {
                  console.log('login:', res);
                })
              });
            } else {
              trtc.login({
                sdkAppId: sdkappid,
                userId: tencent_user_id,
                userSig,
              }, res => {
                console.log('login:', res);
              })
            }
          }
          // #endif
          uni.$app.login({
            userID: tencent_user_id,
            userSig
          }).then(() => {
            this.$store.commit('setRtcConfig', {
              userSig: userSig,
              sdkAppID: sdkappid || 1400607227,
              userID: tencent_user_id
            });
            uni.hideLoading()
            console.log(123456);
            if (this.type == 'change') {
              console.log(789);
              return uni.navigateBack()
            } else {
              console.log(456);
            }
            uni.redirectTo({
              url: '/pages/index/index'
            })
          }).catch(() => {
            this.loading = false
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding: 0 30px;
  }
  .login{
    width: 509px;
    height: 353px;
    background-color: #00374D;
    &-logo{
      width: 96px;
      height: 63px;
      margin-top: 12px;
    }
    &-input{
      width: 348px;
      height: 32px;
      border: 1px solid #8299A2;
      margin-top: 14px;
      &-inner{
        height: 100%;
        width: 300px;
        font-size: 14px;
        color: #fff;
      }
      &-inner2{
        height: 100%;
        width: 212px;
        font-size: 14px;
        color: #fff;
      }
    }
    &-verifi{
      height: 100%;
      width: 93px;
      font-size: 14px;
      background-color: #fff;
      &.none{
        background-color: #C9CACA;
      }
    }
    &-tool{
      width: 348px;
    }
    &-btn{
      margin-top: 12px;
      width: 348px;
      height: 31px;
      color: #03829B;
    }
    &-divider {
      background-color: #6E8A95;
      width: 100px;
      height: 1px;
    }
    &-other{
      width: 154px;
      
    }
  }

</style>
